<script  setup lang="ts" name="left-menu">
import { ref, reactive, onMounted, onActivated, computed ,defineProps} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import Bus from "@/utils/eventBus";
const store = useStore();
const router = useRouter();
// const appTitle = import.meta.env.VITE_APP_TITLE;
const appTitle = "可视化管理系统";
const headerMenuName = ref("");
const defaultActive = ref("");
const menuSelect = (index: string) => {
  router.push({ name: index, params: {} });
};
const changePassword = () => {
  router.push({ name: "set_account" });
};
const logout = () => {
  window.localStorage.setItem("token", '');
  router.push({ name: "login" });
};
const outhome = () => {
  router.push({name:"homepage"})
}
  const user = computed(() => {
     return store.state.user
  })
const isCollapse = ref(false);
onMounted(() => {
  Bus.$on("isCollapse", (data: any) => {
    isCollapse.value = data;
  });
  Bus.$on("change-menu", (data: any) => {
    defaultActive.value = data.defauleMenu;
    headerMenuName.value = data.routeName;
  });
  let path = router.currentRoute.value.path;
  headerMenuName.value = path.split("/")[1];
  let pathName = router.currentRoute.value.name;
  if(pathName){
    defaultActive.value = String(pathName);
  }
});

</script>

<template>
  <div class="app-menu">
    <div v-if="!isCollapse" class="menu-top">
    <div class="app-title" >{{ appTitle }}</div>
    <div class="user-info">
      <div class="avator">
        <img src="@/assets/login/user.png" />
      </div>
      <h3 class="username">{{ user.name }}</h3>
      <div class="user-set">
        <span @click="changePassword">修改密码</span>
        <span @click="logout">退出登录</span>
      </div>
    </div>
    </div>

    <!-- 根据$store.state.menuName显示菜单  -->
    <el-menu
      :default-active="defaultActive"
      @select="menuSelect"
      class="app-el-menu"
      :collapse="isCollapse"
    >
      <template v-if="headerMenuName == 'inspection'">
        <el-menu-item index="inspection_index">
          <el-icon><document /></el-icon>
          <template #title>智能巡检</template>
        </el-menu-item>
        <el-menu-item index="inspection_patrolLog">
          <el-icon><document /></el-icon>
          <template #title>智能巡检日志</template>
        </el-menu-item>
        <el-menu-item index="inspection_overview">
          <el-icon><document /></el-icon>
          <template #title>人工巡检概览</template>
        </el-menu-item>
        <el-menu-item index="inspection_list">
          <el-icon><document /></el-icon>
          <template #title>巡检点位列表</template>
        </el-menu-item>
        <el-menu-item index="inspection_artificial">
          <el-icon><document /></el-icon>
          <template #title>人工巡检配置</template>
        </el-menu-item>

      </template>

      <template v-else-if="headerMenuName == 'warning'">
        <el-menu-item index="warning_visual">
          <el-icon><document /></el-icon>
          <template #title>实时预警可视化</template>
        </el-menu-item>
        <el-menu-item index="warning_index">
          <el-icon><document /></el-icon>
          <template #title>预警统计</template>
        </el-menu-item>

        <el-menu-item index="warning_calculation">
          <el-icon><document /></el-icon>
          <template #title>边缘计算盒管理</template>
        </el-menu-item>
      </template>

      <template v-else-if="headerMenuName == 'video'">
        <el-menu-item index="video_visual">
          <el-icon><document /></el-icon>
          <template #title>视频可视化</template>
        </el-menu-item>
        <el-menu-item index="video_overview">
          <el-icon><document /></el-icon>
          <template #title>视频概览</template>
        </el-menu-item>
        <el-menu-item index="video_index">
          <el-icon><document /></el-icon>
          <template #title>摄像头配置</template>
        </el-menu-item>
        <el-menu-item index="video_videoiframe">
          <el-icon><document /></el-icon>
          <template #title>流媒体配置</template>
        </el-menu-item>
      </template>

      <template v-else-if="headerMenuName == 'repair'">
        <el-menu-item index="repair_index">
          <el-icon><document /></el-icon>
          <template #title>设备概览</template>
        </el-menu-item>
        <el-menu-item index="repair_repairs">
          <el-icon><document /></el-icon>
          <template #title>设备报修</template>
        </el-menu-item>
        <!-- <el-menu-item index="dashboard_list">
          <el-icon><document /></el-icon>
          <template #title>设备智能检测</template>
        </el-menu-item> -->
        <el-menu-item index="set_patrol">
          <el-icon><document /></el-icon>
          <template #title>设备配置</template>
        </el-menu-item>
        <el-menu-item index="set_patrol_account">
          <el-icon><document /></el-icon>
          <template #title>账号配置</template>
        </el-menu-item>
      </template>

      <template v-else-if="headerMenuName == 'emergency'">
        <el-menu-item index="emergency_index">
          <el-icon><setting /></el-icon>
          <template #title>应急日志</template>
        </el-menu-item>
        <el-menu-item index="emergency_group">
          <el-icon><setting /></el-icon>
          <template #title>应急组配置</template>
        </el-menu-item>
        <el-menu-item index="emergency_plan">
          <el-icon><setting /></el-icon>
          <template #title>应急预案配置</template>
        </el-menu-item>
      </template>

      <!-- 智能票据 -->
      <template v-else-if="headerMenuName == 'bill'">
        <el-menu-item index="bill_index">
          <el-icon><setting /></el-icon>
          <template #title>票据管理</template>
        </el-menu-item>
        <el-menu-item index="bill_dialogtest">
          <el-icon><setting /></el-icon>
          <template #title>上传测试</template>
        </el-menu-item>
      </template>

        <!-- 能耗监测 -->
      <template v-else-if="headerMenuName == 'energy'">
        <el-menu-item index="energy_index">
          <el-icon><document /></el-icon>
          <template #title>水表数据概括</template>
        </el-menu-item>
      </template>

        <!-- 环境监测 -->
      <template v-else-if="headerMenuName == 'environment'">
        <el-menu-item index="environment_index">
          <el-icon><document /></el-icon>
          <template #title>环境数据概括</template>
        </el-menu-item>
        <el-menu-item index="environment_dust">
          <el-icon><document /></el-icon>
          <template #title>扬尘监控设备</template>
        </el-menu-item>
        <el-menu-item index="environment_spray">
          <el-icon><document /></el-icon>
          <template #title>喷淋联动设备</template>
        </el-menu-item>
      </template>

        <!-- 智能安全帽 -->
      <template v-else-if="headerMenuName == 'safetyhat'">
        <el-menu-item index="safetyhat_index">
          <el-icon><document /></el-icon>
          <template #title>安全帽分布</template>
        </el-menu-item>
        <el-menu-item index="safetyhat_list">
          <el-icon><document /></el-icon>
          <template #title>安全帽列表</template>
        </el-menu-item>
      </template>

        <!-- 电子围栏 -->
      <template v-else-if="headerMenuName == 'enclosure'">
        <el-menu-item index="enclosure_index">
          <el-icon><document /></el-icon>
          <template #title>电子围栏</template>
        </el-menu-item>
      </template>

      <!-- AI开放 -->
      <template v-else-if="headerMenuName == 'aicome'">
        <el-menu-item index="aicome_index">
          <el-icon><document /></el-icon>
          <template #title>自助演示</template>
        </el-menu-item>
        <el-menu-item index="aicome_exhibition">
          <el-icon><document /></el-icon>
          <template #title>场景展示</template>
        </el-menu-item>
        <el-menu-item index="aicome_platform">
          <el-icon><document /></el-icon>
          <template #title>开放平台</template>
        </el-menu-item>
      </template>

      <!-- 设置 -->
      <template v-else>
        <el-menu-item index="set_department">
          <el-icon><document /></el-icon>
          <template #title>部门设置</template>
        </el-menu-item>
        <el-menu-item index="set_user">
          <el-icon><document /></el-icon>
          <template #title>人员设置</template>
        </el-menu-item>
        <el-menu-item index="set_account">
          <el-icon><setting /></el-icon>
          <template #title>账号设置</template>
        </el-menu-item>
      </template>
    </el-menu>

    <div class="menu-out">
    <el-button type="primary" plain @click="outhome">返回主页</el-button>
  </div>
  </div>

</template>

<style scoped lang="scss">
.app-menu {
  background: #1f1f1f;
  width: 200px;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  overflow: hidden;
  .menu-top{
    width:200px;
  }
  .app-title {
    padding: 20px;
  }
  .user-info {
    padding: 20px;
    .avator {
      width: 70px;
      height: 70px;
      border-radius: 70px;
      margin: 0 auto;
      border: 1px solid #eee;
      overflow: hidden;
      img {
        width: 100%;
        display: block;
      }
    }
    .username {
      margin: 10px 0;
      text-align: center;
    }
    .user-set {
      margin-top: 10px;
      font-size: 12px;
      span {
        color: #1890ff;
        padding: 5px 10px;
        font-size: 12px;
        cursor: pointer;
      }
    }
  }
  .app-el-menu {
    .is-active {
      background: #1a90ff;
      color: #fff;
    }
  }
}
.menu-out{
  margin: 0 auto;
  width: 56px;
  position:fixed;
	bottom:30px;
	left: 53px;
  // background-color: #1a90ff;
}
</style>
